<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calm Tasks - Breathing Exercise</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .neumorphic {
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 
                20px 20px 60px rgba(0, 0, 0, 0.1), 
                -20px -20px 60px rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
        }
        .neumorphic-inset {
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 
                inset 8px 8px 16px rgba(0, 0, 0, 0.1), 
                inset -8px -8px 16px rgba(255, 255, 255, 0.1);
            border-radius: 15px;
        }
        .status-bar {
            background: linear-gradient(90deg, #000 0%, #333 100%);
            height: 44px;
        }
        .breathing-circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 70%, transparent 100%);
            animation: breathe 8s ease-in-out infinite;
            box-shadow: 
                0 0 50px rgba(255,255,255,0.3),
                inset 0 0 50px rgba(255,255,255,0.1);
        }
        .breathing-circle-inner {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 100%);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: breathe-inner 8s ease-in-out infinite;
        }
        @keyframes breathe {
            0%, 100% { 
                transform: scale(1);
                box-shadow: 0 0 50px rgba(255,255,255,0.3), inset 0 0 50px rgba(255,255,255,0.1);
            }
            25% { 
                transform: scale(1.2);
                box-shadow: 0 0 80px rgba(255,255,255,0.5), inset 0 0 80px rgba(255,255,255,0.2);
            }
            50% { 
                transform: scale(1.2);
                box-shadow: 0 0 80px rgba(255,255,255,0.5), inset 0 0 80px rgba(255,255,255,0.2);
            }
            75% { 
                transform: scale(1);
                box-shadow: 0 0 50px rgba(255,255,255,0.3), inset 0 0 50px rgba(255,255,255,0.1);
            }
        }
        @keyframes breathe-inner {
            0%, 100% { 
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.6;
            }
            25% { 
                transform: translate(-50%, -50%) scale(1.3);
                opacity: 0.9;
            }
            50% { 
                transform: translate(-50%, -50%) scale(1.3);
                opacity: 0.9;
            }
            75% { 
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.6;
            }
        }
        .instruction-text {
            animation: fade-instruction 8s ease-in-out infinite;
        }
        @keyframes fade-instruction {
            0%, 100% { opacity: 1; }
            25%, 75% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        .progress-ring {
            transform: rotate(-90deg);
        }
        .progress-circle {
            stroke-dasharray: 251;
            stroke-dashoffset: 251;
            animation: progress 120s linear;
        }
        @keyframes progress {
            to {
                stroke-dashoffset: 0;
            }
        }
        .floating-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
            animation: float 15s infinite linear;
        }
        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-10vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body class="h-screen overflow-hidden text-white">
    <!-- Floating Particles Background -->
    <div class="floating-particles">
        <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
        <div class="particle" style="left: 20%; animation-delay: 2s;"></div>
        <div class="particle" style="left: 30%; animation-delay: 4s;"></div>
        <div class="particle" style="left: 40%; animation-delay: 6s;"></div>
        <div class="particle" style="left: 50%; animation-delay: 8s;"></div>
        <div class="particle" style="left: 60%; animation-delay: 10s;"></div>
        <div class="particle" style="left: 70%; animation-delay: 12s;"></div>
        <div class="particle" style="left: 80%; animation-delay: 14s;"></div>
        <div class="particle" style="left: 90%; animation-delay: 1s;"></div>
    </div>

    <!-- iOS Status Bar -->
    <div class="status-bar flex justify-between items-center px-6 text-white text-sm font-medium">
        <div class="flex items-center space-x-1">
            <span>9:41</span>
        </div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 p-6 flex flex-col items-center justify-center" style="height: calc(100vh - 44px);">
        <!-- Header -->
        <div class="absolute top-20 left-6 right-6 flex items-center justify-between">
            <button class="neumorphic w-12 h-12 flex items-center justify-center">
                <i class="fas fa-arrow-left text-white"></i>
            </button>
            <div class="text-center">
                <h1 class="text-xl font-semibold text-white">Breathing Space</h1>
                <p class="text-sm text-white/80">Find your calm</p>
            </div>
            <button class="neumorphic w-12 h-12 flex items-center justify-center">
                <i class="fas fa-pause text-white"></i>
            </button>
        </div>

        <!-- Progress Ring -->
        <div class="absolute top-32 right-6">
            <svg class="w-16 h-16 progress-ring" viewBox="0 0 80 80">
                <circle cx="40" cy="40" r="35" stroke="rgba(255,255,255,0.2)" stroke-width="4" fill="none"/>
                <circle cx="40" cy="40" r="35" stroke="rgba(255,255,255,0.8)" stroke-width="4" fill="none"
                        class="progress-circle" stroke-linecap="round"/>
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-xs text-white font-medium">2:00</span>
            </div>
        </div>

        <!-- Main Breathing Circle -->
        <div class="relative flex items-center justify-center mb-12">
            <div class="breathing-circle relative flex items-center justify-center">
                <div class="breathing-circle-inner"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <i class="fas fa-wind text-white text-4xl opacity-60"></i>
                </div>
            </div>
        </div>

        <!-- Breathing Instructions -->
        <div class="text-center mb-8">
            <div class="instruction-text">
                <h2 class="text-2xl font-semibold text-white mb-2">Breathe In</h2>
                <p class="text-white/80">Follow the circle and breathe slowly</p>
            </div>
        </div>

        <!-- Breathing Pattern Info -->
        <div class="neumorphic p-6 mb-8 text-center max-w-sm">
            <h3 class="text-lg font-semibold text-white mb-3">4-7-8 Breathing</h3>
            <div class="grid grid-cols-3 gap-4 text-sm">
                <div class="text-center">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-2">
                        <span class="text-white font-bold">4</span>
                    </div>
                    <p class="text-white/80">Inhale</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-2">
                        <span class="text-white font-bold">7</span>
                    </div>
                    <p class="text-white/80">Hold</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-2">
                        <span class="text-white font-bold">8</span>
                    </div>
                    <p class="text-white/80">Exhale</p>
                </div>
            </div>
        </div>

        <!-- Control Buttons -->
        <div class="flex items-center space-x-6">
            <button class="neumorphic w-16 h-16 flex items-center justify-center">
                <i class="fas fa-step-backward text-white text-lg"></i>
            </button>
            
            <button class="neumorphic w-20 h-20 flex items-center justify-center">
                <i class="fas fa-pause text-white text-xl"></i>
            </button>
            
            <button class="neumorphic w-16 h-16 flex items-center justify-center">
                <i class="fas fa-step-forward text-white text-lg"></i>
            </button>
        </div>

        <!-- Bottom Encouragement -->
        <div class="absolute bottom-8 left-6 right-6 text-center">
            <p class="text-white/80 text-sm">You're doing great. Let your worries fade away.</p>
        </div>
    </div>

    <script>
        // Simulate breathing instruction changes
        const instructions = [
            { text: "Breathe In", subtext: "Inhale slowly for 4 counts" },
            { text: "Hold", subtext: "Hold your breath for 7 counts" },
            { text: "Breathe Out", subtext: "Exhale slowly for 8 counts" },
            { text: "Rest", subtext: "Pause and prepare for the next breath" }
        ];
        
        let currentInstruction = 0;
        const instructionElement = document.querySelector('.instruction-text');
        
        function updateInstruction() {
            const instruction = instructions[currentInstruction];
            instructionElement.innerHTML = `
                <h2 class="text-2xl font-semibold text-white mb-2">${instruction.text}</h2>
                <p class="text-white/80">${instruction.subtext}</p>
            `;
            currentInstruction = (currentInstruction + 1) % instructions.length;
        }
        
        // Update instructions every 2 seconds to match breathing cycle
        setInterval(updateInstruction, 2000);
        
        // Initialize first instruction
        updateInstruction();
    </script>
</body>
</html>